<div class="table-content">
  <d-button *ngIf="csvData.length>0" class="my-glob-padding-right" bsStyle="primary" [showLoading]="btnShowLoading"
    (btnClick)="saveStepData()">保存</d-button>
  <d-button class="my-glob-padding-right" bsStyle="common" (btnClick)="addStepData()">添加</d-button>
  <d-button class="my-glob-padding-right" *ngIf="csvData.length>0" bsStyle="common"
    (btnClick)="exportCsvFile()">导出</d-button>
  <d-toggle class="my-glob-padding-right" dTooltip [(ngModel)]="isAutoSave" (change)="onChageAutoSave($event)"
    [content]="'帮助.表格.自动' | translate" [color]="'#FECC55'"></d-toggle>
  <d-toggle dTooltip [(ngModel)]="isAutoExe" (change)="onChageAutoExe($event)" [content]="'帮助.图片.自动' | translate"
    [color]="'#50D4AB'"></d-toggle>

  <d-data-table style="margin-top: 8px;" [borderType]="'bordered'" *ngIf="csvData.length>0" [dataSource]="csvFilterList"
    [size]="'md'" [fixHeader]="true" [scrollable]="true" dLoading [loading]="loadingTip" [backdrop]="true"
    [loadingStyle]="'infinity'" tableHeight="100%" [virtualMinBufferPx]="10" [virtualMaxBufferPx]="20"
    [tableOverflowType]="'overlay'">
    <thead dTableHead>
      <tr dTableRow>
        <th dHeadCell>索引</th>
        <th dHeadCell [sortable]="true" [showSortIcon]="false" (sortChange)="onSortChange($event, 0)"
          [filterList]="ordinalFilterList" [filterable]="true" [filterMultiple]="true" [filterBoxWidth]="'200px'"
          (filterChange)="filterChangeMutil($event,0)">{{ csvHeader[0] }}</th>
        <th dHeadCell [filterList]="stepNameFilterList" [filterable]="true" [filterMultiple]="true"
          [filterBoxWidth]="'200px'" (filterChange)="filterChangeMutil($event,1)">{{ csvHeader[1] }}</th>
        <th dHeadCell>{{ csvHeader[2] }}</th>
        <th dHeadCell>{{ csvHeader[3] }}</th>
        <th dHeadCell>{{ csvHeader[4] }}</th>
        <th dHeadCell>{{ csvHeader[5] }}</th>
        <th dHeadCell>{{ csvHeader[6] }}</th>
        <th dHeadCell>{{ csvHeader[7] }}</th>
        <th dHeadCell>操作</th>
      </tr>
    </thead>
    <tbody dTableBody>
      <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
        <tr dTableRow>
          <td dTableCell [rowItem]="rowItem" [field]="'index'">
            <span>{{ rowIndex + 1 }}</span>
          </td>
          <td dTableCell [rowItem]="rowItem" [field]="csvHeader[0]">
            <span>{{ rowItem[0] }}</span>
          </td>

          <td dTableCell [editable]="true" [editableTip]="editableTip" [(editing)]="rowItem[csvHeader[1]+'Edit']"
            [beforeEditEnd]="beforeEditEnd" [field]="csvHeader[1]" [rowItem]="rowItem">
            <span *ngIf="!rowItem[csvHeader[1]+'Edit']">
              {{ rowItem[1] }}
            </span>
            <div *ngIf="rowItem[csvHeader[1]+'Edit']" class="edit-padding-fix">
              <input [dAutoFocus]="true" class="devui-form-control" [name]="csvHeader[1]" [(ngModel)]="rowItem[1]"
                [attr.maxlength]="100" [attr.minlength]="1" />
            </div>
          </td>

          <td dTableCell [editable]="true" [editableTip]="editableTip" [(editing)]="rowItem[csvHeader[2]+'Edit']"
            [beforeEditEnd]="beforeEditEnd" [field]="csvHeader[2]" [rowItem]="rowItem">
            <span *ngIf="!rowItem[csvHeader[2]+'Edit']">
              {{ rowItem[2] }}
            </span>
            <div *ngIf="rowItem[csvHeader[2]+'Edit']" class="edit-padding-fix">
              <input [dAutoFocus]="true" class="devui-form-control" [name]="csvHeader[2]" [(ngModel)]="rowItem[2]"
                [attr.maxlength]="100" />
            </div>
          </td>

          <td dTableCell [editable]="true" [editableTip]="editableTip" [(editing)]="rowItem[csvHeader[3]+'Edit']"
            [beforeEditEnd]="beforeEditEnd" [field]="csvHeader[3]" [rowItem]="rowItem">
            <span *ngIf="!rowItem[csvHeader[3]+'Edit']">
              {{ rowItem[3] }}
            </span>
            <div *ngIf="rowItem[csvHeader[3]+'Edit']" class="edit-padding-fix">
              <input class="devui-form-control" [attr.maxlength]="100" [dAutoFocus]="true" [min]="0"
                [name]="csvHeader[3]" [(ngModel)]="rowItem[3]">
            </div>
          </td>


          <td dTableCell [editable]="true" [editableTip]="editableTip" [(editing)]="rowItem[csvHeader[4]+'Edit']"
            [beforeEditEnd]="beforeEditEnd" [field]="csvHeader[4]" [rowItem]="rowItem">
            <span *ngIf="!rowItem[csvHeader[4]+'Edit']">
              {{ rowItem[4] }}
            </span>
            <div *ngIf="rowItem[csvHeader[4]+'Edit']" class="edit-padding-fix">
              <input class="devui-form-control" [attr.maxlength]="100" [dAutoFocus]="true" [name]="csvHeader[4]"
                [(ngModel)]="rowItem[4]">
            </div>
          </td>

          <td dTableCell [editable]="true" [editableTip]="editableTip" [(editing)]="rowItem[csvHeader[5]+'Edit']"
            [beforeEditEnd]="beforeEditEnd" [field]="csvHeader[5]" [rowItem]="rowItem">
            <span *ngIf="!rowItem[csvHeader[5]+'Edit']">
              {{ rowItem[5] }}
            </span>
            <div *ngIf="rowItem[csvHeader[5]+'Edit']" class="edit-padding-fix">
              <input class="devui-form-control" [attr.maxlength]="100" [dAutoFocus]="true" [name]="csvHeader[5]"
                [(ngModel)]="rowItem[5]">
            </div>
          </td>

          <td dTableCell [editable]="true" [editableTip]="editableTip" [(editing)]="rowItem[csvHeader[6]+'Edit']"
            [beforeEditEnd]="beforeEditEnd" [field]="csvHeader[6]" [rowItem]="rowItem">
            <span *ngIf="!rowItem[csvHeader[6]+'Edit']">
              {{ rowItem[6] }}
            </span>
            <div *ngIf="rowItem[csvHeader[6]+'Edit']" class="edit-padding-fix">
              <d-input-number [dAutoFocus]="true" [min]="0" [name]="csvHeader[6]"
                [(ngModel)]="rowItem[6]"></d-input-number>
            </div>
          </td>

          <td dTableCell [editable]="true" [editableTip]="editableTip" [(editing)]="rowItem[csvHeader[7]+'Edit']"
            [beforeEditEnd]="beforeEditEnd" [field]="csvHeader[7]" [rowItem]="rowItem">
            <span *ngIf="!rowItem[csvHeader[7]+'Edit']">
              {{ rowItem[7] }}
            </span>
            <div *ngIf="rowItem[csvHeader[7]+'Edit']" class="edit-padding-fix">
              <d-input-number [dAutoFocus]="true" [min]="0.3" [step]="0.1" [name]="csvHeader[7]"
                [(ngModel)]="rowItem[7]"></d-input-number>
            </div>
          </td>

          <td dTableCell>
            <d-button bsStyle="text" [showLoading]="btnShowLoading" class="my-glob-margin-right"
              (btnClick)="testStep(rowIndex)">测试</d-button>
            <d-button bsStyle="text" (btnClick)="deleteData(rowIndex)">删除</d-button>
          </td>
        </tr>
      </ng-template>
    </tbody>
  </d-data-table>
</div>
<!-- 添加步骤数据对话框 -->
<ng-template #dialogContent let-modalInstance="modalInstance" let-modalContentInstance="modalContentInstance">
  <app-step-table-form [modalInstance]="modalInstance" [fileName]="fileName" [projectInfo]="projectInfo"
    [modalContentInstance]="modalContentInstance"></app-step-table-form>
</ng-template>